{include file="public/header"}
<title>个人资料</title>
<style xmlns="http://www.w3.org/1999/html">
        body{
            width:100%;
            height:100%;
            margin:0;
            padding:0;
            background-color: #F7F7F7;
        }
        /*头部*/
        .top{
            height: 60px;
            width: 100%;
            background:rgba(22,26,39,1);
        }
        .top_box{
            width: 1200px;
            height: 100%;
            margin: 0 auto;
            align-items: center;

        }
        .top_name_left{
            width:38px;
            height:38px;
            background:rgba(52,99,230,1);
            border-radius:10px;
            margin-right: 10px;
        }
        .top_name{
            height:60px;
            font-size:24px;
            font-family:PingFangSC-Medium;
            font-weight:500;
            color:rgba(255,255,255,1);
            line-height:60px;
        }
        .top_name_r{
            width:76px;
            height:30px;
            border-radius:15px;
            border:1px solid rgba(255,255,255,1);
            margin-left:26px;
            align-items: center;
            justify-content: center;
            display: flex;
        }
        .top_name_r img{
            height: 16px;
            width: 16px;
        }
        .top_name_r span{
            height:22px;
            line-height: 22px;
            font-size:16px;
            font-family:PingFangSC-Regular;
            font-weight:400;
            color:rgba(255,255,255,1);
            margin-left: 3px;
        }
        .lii{
            height:22px;
            font-size:16px;
            font-family:PingFangSC-Regular;
            font-weight:400;
            color:rgba(255,255,255,1);
            line-height:22px;
            margin-right: 24px;
        }
        .top_login{
            margin-left: 36px;
            display: flex;
            align-items: center;
        }
        .top_login img{
            width: 28px;
            height: 28px;
        }
        .top_login span{
            height:22px;
            font-size:16px;
            font-family:PingFangSC-Regular;
            font-weight:400;
            color:rgba(255,255,255,1);
            line-height:22px;
            margin-left: 8px;
        }
        .top_marginR{
            margin-right: 16px;
        }
        /*头部*/

        /*footer1样式*/
        .footer{
            width:100%;
            height:130px;
            background:rgba(31,31,31,1);
            display: flex;
            align-items: center;
        }
        .footer_in{
            width: 1210px;
            margin: 0 auto;
            height:18px;
            font-size:13px;
            font-family:PingFangSC-Regular;
            font-weight:400;
            color:rgba(153,153,153,1);
            line-height:18px;
        }
        /*footer1样式*/
        .bar{
            width:1200px;
            height:57px;
            align-items:center;
            margin: 0 auto;
            font-size:12px;
            color:#999999;
        }
        .right_arrow{
            width:14px;
            height:14px;
            margin-left:6px;
            margin-right:6px;
        }
        .box{
            width:1200px;
            margin: 0 auto;
            margin-bottom:30px;
        }
        .left{
            width:150px;
            background:#FFFFFF;
            box-shadow:0px 4px 10px 0px rgba(0,0,0,0.04);
            border-radius:4px;
            margin-right:20px;
            height: 520px;
        }
        .right{
            width:1030px;
            height:470px;
            background:#FFFFFF;
            box-shadow:0px 4px 10px 0px rgba(0,0,0,0.04);
            border-radius:4px;
        }
        .right570{
            height:570px;
        }
        .avatar,.avatar img{
            width:80px;
            height:80px;
            border-radius:50%;
        }
        .avatar{
            margin:20px auto 10px;
        }
        .avatar img{
            object-fit: cover;
        }
        .phone{
            text-align:center;
            font-size:14px;
            color:#333;
            margin-bottom:20px;
        }
        .title{
            font-size:14px;
            color:#333;
            height:40px;
            line-height:40px;
            text-align: left;
            width: 58px;
            padding: 0 46px;
        }
        .hover:hover{
            text-decoration:underline;
            cursor:hand;
            cursor:pointer;
        }
        .blue{
            font-size:14px;
            color:#FFFFFF;
            height:40px;
            line-height:40px;
            text-align: left;
            width: 58px;
            padding: 0 46px;
            background-color:#3463E6;
            border-radius:0px 0px 4px 4px;
        }
        .right_tit{
            height:60px;
            line-height:60px;
            padding-left:21px;
            font-size:15px;
            color:#333333;
            border-bottom:1px solid #EDEDED;
        }
        .active{
            color:#3463E6;
            border-bottom:2px solid #3463E6;
        }
        .right1{
            margin-left:43px;
        }
        .avatar1,.avatar1 img{
            width:120px;
            height:120px;
            border-radius:50%;
        }
        .avatar1{
            position:relative;
            margin:60px auto 60px;
        }
        .avatar1 img{
            object-fit: cover;
        }
        .mengban{
            position:absolute;
            top:0;
            left:0;
            width:120px;
            height:120px;
            text-align:center;
            line-height:120px;
            border-radius:50%;
            background:rgba(0,0,0,0);
            font-size:14px;
            color:#FFFFFF;
            opacity:0;
        }
        .mengban:hover{
            background:rgba(0,0,0,0.4);
            opacity:1;
            cursor:hand;
            cursor:pointer;
        }
        .cName{
            line-height:40px;
            font-size:14px;
            color:#999;
            margin-bottom: 10px;
        }
        input[type='text']{
            -webkit-appearance: none;
            outline: none;
            background: transparent;
            width:300px;
            height:40px;
            color: #666;
            font-size: 14px;
            margin: 0;
            height: 40px;
            padding-left:10px;
            padding-right:10px;
            border:1px solid #D0D0D0;
            border-radius:4px;
            margin-left:16px;
        }
        textarea{
            -webkit-appearance: none;
            outline: none;
            background: transparent;
            width:300px;
            height:80px;
            color: #666;
            font-size: 14px;
            margin: 0;
            padding-left:10px;
            padding-right:10px;
            border:1px solid #D0D0D0;
            border-radius:4px;
            margin-left:16px;
        }
        input::-webkit-input-placeholder {
            color: #666;
            font-size: 14px;
        }
        .button{
            width:114px;
            height:38px;
            color: #FFFFFF;
            font-size: 14px;
            text-align:center;
            line-height:38px;
            border-radius:4px;
            background:#3463E6;
            margin:0 423px;
            margin-top:20px;
        }
        .a_sign {
            font-size: 17px;
            color: rgba(51, 51, 51, 1);
            line-height: 24px;
            padding-left: 36px;
            margin-bottom: 15px;
        }

        .a_sign span {
            font-size: 15px;
            color: rgba(160, 160, 163, 1);
            line-height: 21px;
            margin-left: 14px;
        }

        .common {
            width: 80px;
            height: 32px;
            border-radius: 2px;
            border: 1px solid rgba(207, 210, 216, 1);
            text-align: center;
            line-height: 30px;
            font-size: 14px;
            color: rgba(102, 102, 102, 1);
            margin-right: 12px;
            margin-bottom: 12px;
            box-sizing: border-box;
            float: left;
        }

        .common:nth-child(5n) {
            margin-right: 0;
        }

        .common.active {
            background: rgba(106, 182, 144, 1);
            border: 1px solid rgba(106, 182, 144, 1);
            color: rgba(255, 255, 255, 1);
        }

        .zdy {
            width: 104px;
            height: 32px;
            border-radius: 2px;
            border: 1px solid rgba(207, 210, 216, 1);
            text-align: center;
            line-height: 30px;
            font-size: 14px;
            color: rgba(207, 210, 216, 1);
            box-sizing: border-box;
        }

        input[type='text'] {
            -webkit-appearance: none;
            outline: none;
            background: transparent;
            width: 104px;
            height: 32px;
            color: #666;
            font-size: 14px;
            margin: 0;
            /*text-align: center;*/
            line-height: 30px;
            border: 1px solid #6AB690 !important;
            padding-left: 10px;
            padding-right: 10px;
            border: 1px solid #D0D0D0;
            border-radius: 2px;
            box-sizing: border-box;
        }

        .after:after {
            content: '';
            display: block;
            clear: both;
        }

        .btn {
            width: 114px;
            height: 38px;
            background: rgba(106, 182, 144, 1);
            border-radius: 4px;
            font-size: 14px;
            color: rgba(255, 255, 255, 1);
            margin: 23px auto;
            text-align: center;
            line-height: 38px;
        }

        .hidden {
            display: none;
        }
        .code {
            width: 450px;
            /*height:170px;*/
            margin: 0 auto;
            margin-top: 80px;
        }
    </style>
</head>
<body>
<div class="bar flex-wrap">
    置家优选 <img src="__IMG__/right_arrow.png" class="right_arrow" />个人中心
</div>
<div class="box flex-wrap">
    {include file="public/body"}
    <div class="flex-con right {if $res.user_type != 1}right570{/if}" >
        <div class="right_tit flex-wrap">
            <div class=" {if $aa == 'User/index'} active {/if}" style="cursor:pointer" onclick="location.href='{:url('User/index')}' ">修改资料</div>
            <div class="right1 {if $aa == 'User/about'} active {/if}" style="cursor: pointer" onclick="location.href='{:url('User/about')}' ">关于我们</div>
            {if $res.user_type != 1}
            <div class="right1 {if $aa == 'User/usersign'} active {/if}" style="cursor: pointer" onclick="location.href='{:url('User/usersign')}' ">标签</div>
            {/if}
        </div>
     <form id="fabutask">
         <div class="code">
             <div class="a_sign">添加标签 <span>添加你的标签，如：专业</span></div>
             <div class="after">
                 {volist name="res.user_signs_3" id='r'}
                 <span class="common active">{$r}</span>
                 {/volist}
             </div>
             <div class="addinput" style="line-height: 40px;width: 600px;">

             </div>
             <br/>
             <div class="zdy" onclick="fnZdy()" id="zdy">+ 添加标签</div>
         </div>
        <div class="button btn">确定修改</div>
      </form>
    </div>
</div>


{include file="public/foot1"}
</body>
<script src="/static/admin/js/jquery.min.js"></script>
<script type="text/javascript" src="__JSS__/plugins/layui/layui.all.js"></script>
<script type="text/javascript" src="__JS__/wk.js"></script>
<script type="text/javascript">
    function fnZdy() {
        $('.addinput').append('<input type="text" class="addsign" style="margin-right: 10px;" placeholder="请输入标签">');
    }
    $('.btn').click(function () {
        var formData = $( "#fabutask" ).serialize();
        var ss = '';
        $('.addsign').each(function (i,d) {
           var val = d.value.trim();
           if(val != ''){
               ss += val + ',';
           }
        });
        if(ss == ''){
            alert('标签不能为空！');
            return;
        }else{
            $(this).attr('disabled','disabled').html('提交中...');
            $.ajax({
                url: '/home/User/usersign',
                data: 'ss='+ss,
                type: 'POST',
                dataType: 'JSON',
                success: function (returnData) {
                    alert(returnData.msg);
                    if(returnData.code == 200){
                        window.location.reload();
                    }
                },
                error: function () {
                    alert('服务器错误，请刷新重试！');
                }
            })
        }
    });
</script>
</html>
